<template>
  <view class="container">
    <view class="brand">
      <view class="logo">
        <up-image :showLoading="true" radius="80" :src="siteInfo.web_logo ? siteInfo.web_logo : '/static/pic_boy@2x.png'"
          width="80px" height="80px" />
      </view>
      <view class="content">
        <view class="title">{{ siteInfo.web_name }}</view>
      </view>
    </view>
    <view class="form">
      <view class="tips">
        <view class="text">登录后享受更多精彩内容</view>
      </view>
      <view class="btn-group">
        <view class="btn">
          <up-button :color="`linear-gradient(180deg, ${siteInfo.theme_color} 0%, ${siteInfo.theme_active_color} 100%)`"
            shape="circle" text="授权登录" @tap="doLogin">
          </up-button>
        </view>
        <view class="link-group">
          <view class="link-item" @tap="onBackPage">
            暂不登录
          </view>
          <view class="link-item" @tap="openWin({url:'/pages/login/sms'})">
            短信登录
          </view>
        </view>
        <!-- <view class="btn" @tap="onBackPage">
          <up-button shape="circle" text="暂不登录"></up-button>
        </view> -->
      </view>
    </view>
    <!-- 版权说明 -->
    <view class="copyright">
      <view class="text">© 2019-2023 Copyright {{ siteInfo.web_name }}</view>
      <view class="text link" v-if="siteInfo.page_title?.user_service_xieyi">
        <u-checkbox-group placement="row" @change="hanldXieyiChange">
          <view class="copyright-active">
            <u-checkbox label="我已阅读并同意" name="1" labelSize="10">
            </u-checkbox>
            <text class="text-link" @tap="openWin({ url: '#tags?name=user_service_xieyi' })">
              《{{ siteInfo.page_title?.user_service_xieyi }}》
            </text>
          </view>
        </u-checkbox-group>
      </view>
    </view>
  </view>
</template>
    
<script lang="ts" setup>
import { useSite } from "@/stores/site";
import { openWin, toast } from "@/utils/helpers";

const props = withDefaults(defineProps<{
  icode: string
}>(), {})

const siteInfo = storeToRefs(useSite()).siteInfo

const xieyiActive = ref(false)
const formData = ref({
  icode: props.icode ?? '',
})

// 提交登录
const doLogin = () => {
  if (!xieyiActive.value) {
    toast("请勾选协议同意");
    return;
  }
  uni.$u.http.post("Users/wechatLogin", formData.value).then((e: any) => {
    if ([0, 404].includes(e?.code)) {
      toast(e?.msg || '登录失败')
      return;
    }
    window.location.href = e?.data ?? ''
  });
};

// 同意协议
const hanldXieyiChange = (e: any) => {
  const xieyiValue = e[0] ?? false;
  xieyiActive.value = xieyiValue === '1' ? true : false;
}

const onBackPage = () => {
  uni.reLaunch({
    url: '/pages/index/index'
  })
};
</script>
    
<style lang="scss">
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 320rpx;

  .content {
    display: flex;
    flex-direction: column;
    align-items: center;

    .title {
      font-size: 42rpx;
      font-weight: bolder;
      margin: 30rpx 0rpx;
      color: #303133;
    }

    .small {
      font-size: 28rpx;
      color: #bababa;
    }
  }
}

.form {
  width: 80%;
  margin: 30rpx auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .tips {
    margin: 30rpx 0rpx;
    color: #909399;
    font-size: 24rpx;
  }

  .u-form {
    width: 100%;
    margin-bottom: 30rpx;
  }

  .btn-group {
    width: 100%;

    .btn {
      margin-bottom: 15rpx;

      .u-button {
        height: 100rpx;
      }
    }
    .link-group {
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;
      padding: 0 30rpx;
      .link-item {
        font-size: 24rpx;
        color: #333;
      }
    }
  }
}

/* 版权 */
.copyright {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 30rpx;

  .text {
    font-size: 20rpx;
    color: #bababa;
  }

  .link {
    margin-top: 30rpx;
    display: flex;
    align-items: center;

    .text {
      color: blue;
    }
  }
}

.copyright-active {
  display: flex;
  align-items: center;
  font-size: 22rpx;

  .text-link {
    color: #2979FF;
  }
}
</style>
    